<template>
  <div>
    <SearchPageHeader v-if="showPageHeader" title="搜索列表（应用）"/>

    <Card style="margin:20px;">
        <Form :label-width="60">
            <FormItem label="分类：">
                <TagSelect v-model="value" expandable>
                    <TagSelectOption name="tag1">选项一</TagSelectOption>
                    <TagSelectOption name="tag2">选项二</TagSelectOption>
                    <TagSelectOption name="tag3">选项三</TagSelectOption>
                    <TagSelectOption name="tag4">选项四</TagSelectOption>
                    <TagSelectOption name="tag5">选项五</TagSelectOption>
                    <TagSelectOption name="tag6">选项六</TagSelectOption>
                    <TagSelectOption name="tag7">选项七</TagSelectOption>
                    <TagSelectOption name="tag8">选项八</TagSelectOption>
                    <TagSelectOption name="tag9">选项九</TagSelectOption>
                    <TagSelectOption name="tag10">选项十</TagSelectOption>
                    <TagSelectOption name="tag11">选项十一</TagSelectOption>
                    <TagSelectOption name="tag12">选项十二</TagSelectOption>
                    <TagSelectOption name="tag13">选项十三</TagSelectOption>
                    <TagSelectOption name="tag14">选项十四</TagSelectOption>
                    <TagSelectOption name="tag15">选项十五</TagSelectOption>
                    <TagSelectOption name="tag16">选项十六</TagSelectOption>
                    <TagSelectOption name="tag17">选项十七</TagSelectOption>
                    <TagSelectOption name="tag18">选项十八</TagSelectOption>
                    <TagSelectOption name="tag19">选项十九</TagSelectOption>
                    <TagSelectOption name="tag20">选项二十</TagSelectOption>
                </TagSelect>
            </FormItem>
            <Divider dashed/>
            <FormItem label="排序：">
                <RadioGroup v-model="disabledGroup">
                    <Radio label="最新创建"></Radio>
                    <Radio label="最后更新"></Radio>
                </RadioGroup>
            </FormItem>
        </Form>
    </Card>

    <Row style="margin:20px;" :gutter="10">
        <i-col :lg="6" :xs="24" :sm="12" :md="12" v-for="item in data" :key="item.name" style="margin-bottom:20px;">
            <Card class="card-list">
                <div class="ivu-pt ivu-pl ivu-pr" style="margin-bottom:15px;">
                    <div>
                        <span class="ivu-avatar ivu-avatar-circle ivu-avatar-image ivu-avatar-default"><img src="https://dev-file.iviewui.com/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo/avatar" /></span>
                        <strong class="ivu-ml">iView</strong>
                    </div>
                    <div class="ivu-mt">
                        <div> 负责人：Aresn </div>
                        <div> 最后更新时间：<span class="ivu-time">2016-07-28</span> </div>
                    </div>
                </div>
                <Row style="border-top: 1px solid rgba(0,0,0,.1);margin-top:5px;text-align:center;height:40px;">
                    <i-col :lg="6">
                        <Tooltip content="访问" transfer placement="bottom" style="transform: translateY(50%);">
                            <Icon type="md-open" size="18"/>
                        </Tooltip>
                    </i-col>
                    <i-col :lg="6" style="border-left: 1px solid #dcdee2;">
                        <Tooltip content="下载" transfer placement="bottom" style="transform: translateY(50%);">
                            <Icon type="md-download" size="18"/>
                        </Tooltip>
                    </i-col>
                    <i-col :lg="6" style="border-left: 1px solid #dcdee2;">
                        <Tooltip content="编辑" transfer placement="bottom" style="transform: translateY(50%);">
                            <Icon type="md-create" size="18"/>
                        </Tooltip>
                    </i-col>
                    <i-col :lg="6" style="border-left: 1px solid #dcdee2;">
                        <Dropdown style="transform: translateY(50%);" transfer>
                            <Icon type="ios-more" size="18"/>
                            <template #list>
                                <DropdownMenu>
                                    <DropdownItem>驴打滚</DropdownItem>
                                    <DropdownItem>炸酱面</DropdownItem>
                                    <DropdownItem disabled>豆汁儿</DropdownItem>
                                    <DropdownItem>冰糖葫芦</DropdownItem>
                                    <DropdownItem divided>北京烤鸭</DropdownItem>
                                </DropdownMenu>
                            </template>
                        </Dropdown>
                    </i-col>
                </Row>
            </Card>
        </i-col>
    </Row>
  </div>
</template>

<script>
import SearchPageHeader from './search-page-header.vue'
export default {
    props:{
        showPageHeader:{
            type: Boolean,
            default: true
        }
    },
    components:{
        SearchPageHeader
    },
    data () {
        return {
            disabledGroup:'最新创建',
            value:[],
            data: [
                {title:'Vue.js 实战',desc:'Vue.js 作者尤雨溪作序',amount:'¥ 69 元',status:'推荐',color:'success',image:'https://dev-file.iviewui.com/RZ8FQmZfHkcffMlTBCJllBFjEhEsObVo/middle'},
                {title:'蒙马特城市安全防盗背包',desc:'XDDESIGN 经典版',amount:'¥ 350 元',status:'',image:'https://dev-file.iviewui.com/WLXm7gp1EbLDtvVQgkeQeyq5OtDm00Jd/middle'},
                {title:'Sony 无线立体声耳机',desc:'WH-H800',amount:'¥ 1450 元',status:'',image:'https://dev-file.iviewui.com/4Z0QR2L0J1XStxBh99jVJ8qLfsGsOgjU/middle'},
                {title:'京东 E 卡（100元）',desc:'面值 100 元的京东E卡（电子卡）',amount:'¥ 100 元',status:'缺货',color:'warning',image:'https://dev-file.iviewui.com/ttkIjNPlVDuv4lUTvRX8GIlM2QqSe0jg/middle'},
                {title:'Cherry 机械键盘背光版',desc:'Cherry MX BOARD 1.0',amount:'¥ 600 元',status:'',image:'https://dev-file.iviewui.com/fAenQ8nvRjL7x0i0jEfuDBZHvJfHf3v6/middle'},
                {title:'妙控鼠标 2 - 银色',desc:'Apple Mouse',amount:'¥ 582 元',status:'',image:'https://dev-file.iviewui.com/yeKvhT20lMU0f1T3Y743UlGEOLLnZSnp/middle'}
            ],
        }
    },
    methods: {
        
    }
}
</script>
<style scoped>
.card-list >>> .ivu-card-body {
    padding: 0px;
}
</style>